<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.testswitch {
				position: relative;
				float: left;
				width: 45px;
				margin: 0;
				font-size: 0.6em;
			}

			.testswitch-checkbox {
				display: none;
			}

			.testswitch-label {
				display: block;
				overflow: hidden;
				cursor: pointer;
				border-radius: 20px;
			}

			.testswitch-inner {
				display: block;
				width: 200%;
				margin-left: -100%;
				transition: margin 0.3s ease-in 0s;
				text-align: left;
			}

			.testswitch-inner::before,
			.testswitch-inner::after {
				display: block;
				float: right;
				width: 50%;
				height: 20px;
				padding: 0;
				line-height: 1.8em;
				font-size: 8px;
				color: white;
				font-family: Trebuchet, Arial, sans-serif;
				font-weight: bold;
				box-sizing: border-box;
			}

			.testswitch-inner::after {
				content: attr(data-on);
				padding-left: 10px;
				background-color: #FFAB47;
				color: #FFFFFF;
			}

			.testswitch-inner::before {
				content: attr(data-off);
				padding-right: 10px;
				background-color: #3F9FE8;
				color: white;
				text-align: right;
			}

			.testswitch-switch {
				position: absolute;
				display: block;
				width: 12px;
				height: 12px;
				margin: 4px;
				background: #FFFFFF;
				bottom: 5px;
				border-radius: 20px;
				transition: all 0.3s ease-in 0s;
				text-align: right;
			}

			.testswitch-checkbox:checked+.testswitch-label .testswitch-inner {
				margin-left: 0;
			}

			.testswitch-checkbox:checked+.testswitch-label .testswitch-switch {
				right: 0px;
			}
		</style>
	</head>
	<body>
		<div class="testswitch">
			<input class="testswitch-checkbox" id="onoffswitch" type="checkbox" />
			<label class="testswitch-label" for="onoffswitch">
				<span class="testswitch-inner" data-on="off" data-off="on"></span>
				<span class="testswitch-switch"></span>
			</label>

		</div>
	</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#.oneoffswitch").click(function() {
			clickSwitch();
		});
		var clickSwitch = function() {
			if ($("#$onoffswitch").is(":checked")) {
				console.log("OFF");
				$(".sp-start").css("display", "none");
				$(".sp-close").css("display", "block");

			} else {
				console.log("on");
				$(".sp-close").css("display", "none");
				$(".sp-start").css("display", "block");
			}
		}
	});
</script>
